 <template>
	<div class="rating_page">
        <head-top :head-title="activeVo.jlifeActive.name" go-back='true'></head-top>
        <!-- <section class="header_img" v-for="item in activeVo.jlifeActiveImageList" :key="item.id">
            <img :src="item.imgUrl" class="food_img" style="height:50%;width:50%;float:left">
            
        </section> -->
        <!-- <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in activeVo.jlifeActiveImageList" :key="item.id">
                 <img :src="item.imgUrl" class="food_img" style="height:100%;width:100%">
            </el-carousel-item>
        </el-carousel> -->
        <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in activeVo.jlifeActiveImageList" :key="item.id">
           <img :src="item.imgUrl" class="food_img" style="height:100%;width:100%">
            </el-carousel-item>
            <el-image>
            <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
            </div>
            </el-image>
        </el-carousel>
        <p class="description" style="display:inline">活动详情：{{activeVo.jlifeActive.details}}</p>
         <p class="description" >
                    <span>参与人数： {{activeVo.jlifeActiveJoins.length}}人</span>
                    <el-button size="mini" @click="inActive">参加</el-button>
                    <span style="margin-left:50px">   点赞：</span>
                    <el-button circle :type="buttype" icon="el-icon-star-off" @click="praiseActive">{{praises}}</el-button>
                     
        </p>
        <section class="detail_container" >
            <section class="detail_left">
                 <el-divider content-position="left">活动评论数 
                {{activeVo.jlifeActiveCommentList.length}}
                
                   
                   <router-link :to="{path:'/addcomm',query:{id: activeVo.jlifeActive.id}}" class="head_login"> 
                        <el-button disabled size="mini">评论</el-button>
                    </router-link>
                </el-divider>
               
                <!-- <p>--------活动相关信息--------</p> -->
                <!-- <div class="rating_sale"> -->
                    <!-- <span>评分</span> -->
                    <!-- <rating-star :rating='rating'></rating-star> -->
                    <!-- <span>{{rating.toFixed(1)}}</span> -->
                <!-- </div> -->
                <!-- <p>
                    <span>参与人数： {{activeVo.jlifeActiveJoins.length}}人</span> -->
                    <!-- <span>售价 ¥参数3</span> -->
                    <!-- <span v-if="foods.specfoods.length">起</span> -->
                <!-- </p> -->
                <!-- <p> -->
                    <!-- <span>活动评论数 {{activeVo.jlifeActiveCommentList.length}}</span> -->
                    <!-- <span>好评率 {{satisfy_rate}}%</span> -->
                <!-- </p>    -->
                <!-- <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
                    <li v-for="com in activeVo.jlifeActiveCommentList" :key="com.id" class="infinite-list-item">
                        <span>用户{{com.username}}</span>
                        <el-divider direction="vertical"></el-divider>
                        <span>{{com.comment}}</span>
                        <el-divider></el-divider>    
                    </li>
                </ul>  -->
                <div v-if="activeVo.jlifeActiveCommentList.length!=0">
                <el-card class="box-card" v-for="com in activeVo.jlifeActiveCommentList" :key="com.id" >
                    <div slot="header" class="clearfix">
                        <span style="font-size: 20px;">用户：{{com.username}}</span>
                        <el-button style="float: right; padding: 3px 0;font-size: 12px;" type="text">{{com.creationDate}}</el-button>
                    </div>
                    <div class="text item">
                        {{com.comment}}
                    </div>
                </el-card>
                </div>
            </section>
            <!-- <buy-cart :shopId='shopId'  :foods='foods' @moveInCart="$emit('moveInCart')"></buy-cart> -->
        </section>
    </div>
</template>

<script>
	import headTop from 'src/page/active/activeDetail/headTitle/headTitle'
    import {getImgPath} from 'src/components/common/mixin'
    import ratingStar from 'src/components/common/ratingStar'
    import buyCart from 'src/components/common/buyCart'
    import {imgBaseUrl} from 'src/config/env'

    export default {
    	data(){
            return{
                image_path: 1,
                description: 2,
                month_sales: 3,
                name: 4,
                rating: 5,
                rating_count: 6,
                satisfy_rate: 7,
                foods: 8,
                shopId: 9,
                imgBaseUrl,
                activeId:0,
                activeUrl:'http://172.16.9.9:8081/active/jlife-active/findActiveById',
                activeName:'',
                activeVo:{},
                praises: 0,
                isPraise: false,
                buttype:'warning',
                praiseUrl:'http://172.16.9.9:8081/active/jlife-active-praise/giveLike', // 点赞
                userids:1,
                inActiveUrl:'http://172.16.9.9:8081/active/jlife-active-join/inActive', //参与
            }
        },
        created(){
        	// this.image_path = this.$route.query.image_path;
            // this.description = this.$route.query.description;
            // this.month_sales = this.$route.query.month_sales;
            // this.name = this.$route.query.name;
            // this.rating = this.$route.query.rating;
            // this.rating_count = this.$route.query.rating_count;
            // this.satisfy_rate = this.$route.query.satisfy_rate;
            // this.foods = this.$route.query.foods;
            // this.shopId = this.$route.query.shopId;
            this.activeId =  this.$route.query.id;
        },
        mixins: [getImgPath],
        components: {
        	headTop,
            ratingStar,
            buyCart,
        },
        props:[],
        methods: {
            getActiveById(){ // 获取活动信息
                this.axios.get(this.activeUrl,{
                   params:{
                       activeId:this.activeId
                   }
                }).then((res)=>{
                    console.log(res)
                    this.activeVo = res.data.data.activeVo
                    this.activeName = res.data.data.activeVo.jlifeActive.name;
                    this.activeVo.jlifeActiveJoins.forEach(element => {
                        console.log(element)
                        if(element.praise == 1){
                            this.praises = this.praises+1;
                        }
                    });
                    
                })
            },
            load () {
                this.count += 2
            },
            praiseActive(){ // 点赞
                this.userids = sessionStorage.getItem("userId")
                this.axios.get(this.praiseUrl,{
                    params:{
                        activeId:this.activeId,
                        userId:this.userids
                    }
                }).then((res)=>{
                    this.praises = res.data.data.praiseNum;
                });
                if(this.buttype=='warning'){
                    this.buttype = 'info'
                }else{
                    this.buttype = 'warning'
                }
                
            },
            praiseNum(){ // 点赞数刷新

            },
            inActive(){ // 参与活动
                this.userids = sessionStorage.getItem("userId")
              
                this.axios.get(this.inActiveUrl,{
                    params:{
                        activeId:this.activeId,
                        userId:this.userids
                    }
                }).then((res)=>{
                    console.log(res);
                    this.getActiveById();
                });
               
            }
        },
        mounted(){
            
            this.getActiveById();
        }
    }
</script>
	
<style lang="scss" scoped>
    @import 'src/style/mixin';
	
	.rating_page{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		z-index: 12;
        padding-top: 1.95rem;
        p, span{
            font-family: Helvetica Neue,Tahoma,Arial;
        }
	}
    .header_img{
        position: relative;
        .food_img{
            width: 100%;
            display: block;
        }
        .cover{
            position: absolute;
            @include wh(100%, 100%);
            top: 0;
            left: 0;
        }
    }
    .description{
        @include sc(.6rem, #666);
        margin-top: .5rem;
        line-height: .8rem;
        bottom: .2rem;
        padding: 0 .4rem;
    }
    .detail_container{
        padding: .5rem;
        @include fj;
        align-items: center;
        .detail_left{
            p:nth-of-type(1){
                @include sc(.7rem, #333);
                margin-bottom: .2rem;
            }
            .rating_sale{
                display: flex;
                align-items: center;
                span:nth-of-type(1){
                   @include sc(.6rem, #666);
                   margin-right: .2rem;
                }
                span:nth-of-type(2){
                    @include sc(.55rem, #f60);
                    margin-left: .2rem;
                }
                span:nth-of-type(3){
                   @include sc(.6rem, #666);
                    margin-left: .4rem;
                }
            }
            p:nth-of-type(2){
                font-size: 0;
                margin-top: .3rem;
                span:nth-of-type(1){
                    @include sc(.6rem, #666);
                    margin-right: .4rem;
                }
                span:nth-of-type(2),span:nth-of-type(3){
                    @include sc(.6rem, #f60);
                    margin-right: .2rem;
                }
            }
            p:nth-of-type(3){
                span{
                    @include sc(.6rem, #666);
                }
            }
        }
    }

.text {
    font-size: 16px;
  }

  .item {
    margin-bottom: 8px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 300px;
  }
    .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
